<template>
  <el-dialog
    class="dialog"
    title="工单详情"
    :visible="details"
    width="30%"
    @close="close"
  >
    <div class="pic">
      <el-row
        type="flex"
        justify="space-around"
        align="middle"
        v-if="statusName === '取消'"
      >
        <el-col><img src="@/assets/pic2.png" alt="" /><span>取消</span></el-col>
        <el-col :span="10"><img src="@/assets/pic1.png" alt="" /></el-col>
      </el-row>
      <el-row type="flex" justify="space-around" align="middle" v-else>
        <el-col><img src="@/assets/pic4.png" alt="" /><span>取消</span></el-col>
        <el-col :span="10"><img src="@/assets/pic3.png" alt="" /></el-col>
      </el-row>
    </div>
    <el-descriptions :column="2" direction="horizontal" class="descriptions">
      <el-descriptions-item label="设备编号">{{
        xiangqing.taskCode
      }}</el-descriptions-item>
      <el-descriptions-item label="创建日期">{{
        xiangqing.createTime
      }}</el-descriptions-item>
      <el-descriptions-item v-if="statusName === '取消'" label="取消日期">{{
        xiangqing.updateTime
      }}</el-descriptions-item>
      <el-descriptions-item label="运营人员">{{
        xiangqing.userName
      }}</el-descriptions-item>
      <el-descriptions-item label="工单类型">补货工单</el-descriptions-item>
      <el-descriptions-item label="补货数量" class="num">
        <el-button type="text" class="xq" @click="detailFn">补货详情</el-button>
      </el-descriptions-item>
      <el-descriptions-item label="工单方式">{{
        xiangqing.createType ? '手动' : '自动'
      }}</el-descriptions-item>
      <el-descriptions-item
        :label="statusName === '取消' ? '取消原因' : '备注'"
        >{{ xiangqing.desc }}</el-descriptions-item
      >
    </el-descriptions>
    <el-row type="flex" justify="space-around">
      <el-col :span="5">
        <el-button type="info" plain @click="Again">
          {{ statusName === '取消' ? '重新创建' : '取消工单' }}</el-button
        >
      </el-col>
    </el-row>
    <!-- 补货清单 -->
    <el-dialog title="补货详情" :visible.sync="innerVisible">
      <el-table :data="tableData" style="width: 100%" max-height="350">
        <el-table-column
          fixed
          prop="channelCode"
          label="货道编号"
          width="120"
        />
        <el-table-column prop="skuName" label="商品" width="200" />
        <el-table-column prop="expectCapacity" label="补货数量" />
      </el-table>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { getTaskDetails, getTaskCancel } from '@/api/work'
export default {
  name: 'details-page',
  props: {
    details: { type: Boolean },
    xiangqing: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      innerVisible: false,
      tableData: [],
      statusId: 1
    }
  },
  methods: {
    close() {
      this.$emit('update:details', false)
    },
    async detailFn() {
      this.innerVisible = true
      const res = await getTaskDetails(this.xiangqing.taskId)
      this.tableData = res
    },
    async Again() {
      if (this.statusName === '取消') {
        this.close()
      } else {
        this.$confirm('取消工单后,将不能恢复,是否确认取消?', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        const res = await getTaskCancel({
          taskId: this.xiangqing.taskId,
          desc: ''
        })
        console.log(res)
        // this.close()
      }
    }
  },
  computed: {
    statusName() {
      // console.log(this.xiangqing.taskStatusTypeEntity)
      if (this.xiangqing.taskStatusTypeEntity) {
        return this.xiangqing.taskStatusTypeEntity.statusName
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped lang="scss">
.dialog {
  .pic {
    width: 100%;
    background-color: #ececec63;
    span {
      color: #000000d9;
      font: 14px;
      margin-left: 16px;
    }
  }
  .descriptions {
    margin-top: 30px;
    margin-left: 46px;
    text-align: center;
  }
}
</style>
